<template slot-scope="scope">
  <div>
    <el-checkbox :indeterminate="isIndeterminateVec" v-model="checkAllVec" @change="handleCheckAllChangeVec">整车仓库</el-checkbox>
    <el-checkbox-group v-model="checkedListVec" @change="handleCheckedCitiesChangeVec">
      <div style="margin:0px 0px 0px 20px;width:20px;">
        <!-- <el-checkbox v-for="storageVec in sitesVec" :label="storageVec.storageCode" :key="storageVec.storageCode"
          :value="storageVec.storageCode">
          {{storageVec.storageName}}</el-checkbox> -->
          <el-checkbox v-for="storageVec in sitesVec" :label="storageVec.storageCode" :key="storageVec.storageCode"
          :value="storageVec.storageCode">
          {{storageVec.storageName}}</el-checkbox>
      </div>
    </el-checkbox-group>
  </div>
</template>

<script>
  import { getVehicleWarehouse } from '@/api/common/auth/roleManage'
  export default {
    name: "storageVec",
    data() {
      return {
        checkAllVec: false,
        loading: false,
        isIndeterminateVec: false,
        checkedListVec: [],
        sitesVec: [],
      }
    },
    props:['userPermissionData'],
    created() {
      this.loadData()
    },
    methods: {
      async loadData() {
        this.loading = true;
        const getVehicleWarehouseRes = await getVehicleWarehouse()
        this.loading = false
        // if(getVehicleWarehouseRes.resultCode === 200&&getVehicleWarehouseRes.data&&getVehicleWarehouseRes.data.length>0) {
        //   this.sitesVec = _.cloneDeep(getVehicleWarehouseRes.data);
        //   console.log(this.sitesVec,"sitesVec")
        // }
        console.log(getVehicleWarehouseRes,"getVehicleWarehouseRes")
        if(getVehicleWarehouseRes.resultCode === 200) {
          // this.sitesVec = _.cloneDeep(getVehicleWarehouseRes.data);
          this.sitesVec = _.cloneDeep(getVehicleWarehouseRes.data.records);
        }
        
        console.log(this.userPermissionData,"整车仓库")
        if(this.userPermissionData.vehicleWarehouse){
          let checkList = this.userPermissionData.vehicleWarehouse.split(",")
          checkList.forEach(x=>{
            // this.checkedListVec.push(Number(x))
            this.checkedListVec.push(x)
          })
          if(this.checkedListVec.length == this.sitesVec.length){
            this.checkAllVec=true
          }
        }
      },
      handleCheckAllChangeVec(val) {
        const checkedListVec = [];
        if (val) {
          for (var i = 0; i < this.sitesVec.length; i++) {
            checkedListVec.push(this.sitesVec[i].storageCode);
          }
        }
        this.checkedListVec = checkedListVec;
        // this.checkedListVec = val ? sitesVec : [];
        this.isIndeterminateVec = false;
      },
      handleCheckedCitiesChangeVec(value) {
        let checkedCount = value.length;
        this.checkAllVec = checkedCount === this.sitesVec.length;
        this.isIndeterminateVec = checkedCount > 0 && checkedCount < this.sitesVec.length;
      },


      getData() {
        return [...this.checkedListVec]
      }
    }
  }

</script>

<style scoped>
  .el-checkbox+.el-checkbox {
    margin-left: 0px;
  }

  .el-checkbox {
    margin-right: 25px;
  }

</style>
